<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .comment {
            width: 80%;
            margin: auto;
            border-bottom: 1px solid black;
        }

        #ipt {
            width: 100%;
        }

        #txt {
            width: 100%;
        }

        .box {
            border-bottom: 1px solid gray;
        }

        .box p {
            font-size: 16px;
            width: 100%;
        }

        .box button {
            float: right;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/babel">

    // 定义根组件
    class App extends React.Component {
        state = {
            userList: [
                {
                    author: '小明',
                    content: '小明是个帅哥！！！'
                },
                {
                    author: '小红',
                    content: '小红是个小美女'
                },
            ],

        }
        render() {

            let { userList, author, content } = this.state;
            return (
                <div className='comment'>
                    <h2>评论人:</h2>
                    <input type="text" name="" id="ipt" value={this.state.author} onChange={this.newAuthor} />
                    <h2>评论内容:</h2>
                    <textarea name="" id="txt" cols="30" rows="10" value={this.state.content} onChange={this.newContent}></textarea>
                    <button onClick={() => this.sendData()}>发表</button>
                    <div>
                        <h2>留言板:</h2>
                        {
                            userList.map((item, index) => {
                                return <Child item={item} key={index} delUserList={() => {
                                    userList.splice(index, 1);
                                    this.setState({
                                        userList: userList
                                    })
                                }} />
                            })
                        }
                    </div>
                </div>
            )
        }

        newAuthor = (e) => {
            // 获取输入框最新内容  e.target.value  (受控组件)
            this.setState({
                author: e.target.value
            })
        }

        newContent = (e) => {
            this.setState({
                content: e.target.value
            })
        }

        sendData() {
            let { userList, author, content } = this.state;
            if (!author || !content) {
                alert('请填写完整信息~~');
                return
            }
            let user = {
                author: author,
                content: content
            }
            // unshift 从头部添加
            userList.unshift(user)
            this.setState({
                userList: userList,
                // 清空内容
                author: '',
                content: ''
            })
        }
    }

    class Child extends React.Component {
        render() {
            return (
                <div className='box'>
                    {/*this.props. 获取插槽内容 */}
                    <p>作者:{this.props.item.author}</p>
                    <p>内容:{this.props.item.content} <button onClick={() => {
                        this.props.delUserList();
                    }}>删除</button></p>
                </div>
            )
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'));

</script>

</html>